<template>
    <div
        class="chart-wrapper chart-halo-pie"
        :style="{ height: height + 'px', marginBottom: '24px' }"
        :class="theme"
    >
        <div class="slot pie-halo">
            <span class="chart-text-lt">单位：{{ unit }}</span>
        </div>
        <div class="slot">
            <div
                class="chart"
                :id="id"
                :style="{ height: height + 'px' }"
            ></div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import { COLOR_PLATE } from "@/config/global";
    import { calculateColorBrightness } from "@/lib/extension";

    export default {
        name: "",
        data() {
            return {
                option: null,
                chartObj: null,
                useDualTheme: true,
                theme: "night",
                ratio: JSON.parse(localStorage.ratio),
            };
        },
        components: {
            "v-card": () => import("@/layout/Card"),
        },
        props: {
            id: {
                type: String,
                required: true,
                default: null,
            },
            chartData: {
                type: Array,
                required: true,
                default: () => [{ name: "default", value: 0 }],
            },
            chartColors: {
                type: Array,
                default: () =>
                    new Array("#ffffff00", "#479b58ff", "#5eb281ff", "#08895fff"),
            },
            unit: {
                type: String | Object,
                default: null,
            },
            height: {
                type: Number,
                default: 250,
            },
        },
        watch: {
            chartData: {
                handler(n) {
                    this.updateChart();
                },
                deep: true,
                immediate: true,
            },
            id: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            chartColors: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            unit: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            height: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
        },
        mounted() {},
        methods: {
            updateChart() {
                this.determineTheme();
                this.$nextTick(() => {
                    if (this.chartObj) {
                        this.chartObj.setOption(this.option);
                    } else {
                        this.renderChart();
                    }
                });
            },
            renderChart() {
                if (this.chartData[0]) {
                    this.option = {
                        series: [
                            {
                                type: "pie",
                                zlevel: 1,
                                center: ["50%", "50%"],
                                radius: ["50%", "67%"],
                                data: this.chartData.map((o, i) => {
                                    return {
                                        name: o.name,
                                        value: o.value,
                                        itemStyle: {
                                            color: this.chartColors[i],
                                        },
                                    };
                                }),
                                label: {
                                    show: true,
                                    formatter: "{title|{b}}{number|{c}}",
                                    distanceToLabelLine: 5,
                                    rich: {
                                        hr: {
                                            borderColor: "#FFF",
                                            width: "100%",
                                            borderWidth: 2,
                                            height: 0,
                                        },
                                        title: {
                                            fontSize: 14 * this.ratio,
                                            fontFamily: "ali-m",
                                            color: "#fff",
                                            align: "left",
                                            padding: 6 * this.ratio,
                                        },
                                        number: {
                                            fontSize: 14 * this.ratio,
                                            color: "#fff",
                                            fontFamily: "borda",
                                            align: "left",
                                            padding: 6 * this.ratio,
                                        },
                                    },
                                },
                            },
                            {
                                type: "pie",
                                zlevel: 2,
                                center: ["50%", "50%"],
                                radius: "70%",
                                selectedOffset: 0,
                                data: this.chartData.map((o, i) => {
                                    return {
                                        name: o.name,
                                        value: o.value,
                                        itemStyle: {
                                            color:
                                                i === 0
                                                    ? {
                                                          type: "linear",
                                                          x: 0,
                                                          y: 0,
                                                          x2: 1,
                                                          y2: 1,
                                                          colorStops: [
                                                              {
                                                                  offset: 0,
                                                                  color:
                                                                      "rgba(252,254,253,0.4)",
                                                              },
                                                              {
                                                                  offset: 0.5,
                                                                  color: "#F8FCF9", // 100% 处的颜色
                                                              },
                                                              {
                                                                  offset: 1,
                                                                  color: "#F8FCF9",
                                                              },
                                                          ],
                                                      }
                                                    : "#ffffff00",
                                        },
                                    };
                                }),
                                animation: false,
                                hoverAnimation: false,
                                label: {
                                    normal: {
                                        show: false,
                                    },
                                },
                            },
                        ],
                    };
                    let chartDom = document.getElementById(this.id);
                    this.chartObj = echarts.init(chartDom, null, {
                        renderer: "canvas",
                    });
                    this.chartObj.setOption(this.option);
                    this.chartObj.resize();
                    window.resize = function () {
                        this.chartObj.resize();
                    };
                }
            },
            determineTheme() {
                if (this.useDualTheme) {
                    let now = new Date();
                    if (now.getHours() > 19 || now.getHours() < 7) {
                        this.theme = "night";
                    } else {
                        this.theme = "day";
                    }
                }
            },
        },
    };
</script>

<style scoped>
    .chart {
        width: 100%;
    }
    .chart-wrapper .slot {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        align-items: center;
    }

    .chart-wrapper {
        position: relative;
    }
    .chart-wrapper.pancake .slot .card {
        width: 50%;
    }
    .chart-wrapper .number {
        color: #fff;
    }
</style>